<template>
  <div class="container">
    <div class="left">
      <el-card>
        <LeftMaster></LeftMaster>
      </el-card>
    </div>
    <div class="middle">
      <markdownView></markdownView>
    </div>
    <div class="right">
      <el-card>
        排行榜
      </el-card>
      <el-card>
        豆瓣评分榜
      </el-card>
      <el-card>
        <LeftMaster></LeftMaster>
      </el-card>
    </div>
  </div>
</template>

<script setup lang='ts'>
import LeftMaster from "@/page/book/leftMaster.vue"
import markdownView from "@/components/markdownView.vue"
</script>
<style scoped lang="scss">
.container {
  display: flex;
  justify-content:center;

  div {
    margin-right: 10px;
  }

  .left{
    width: 14.3%;
  }
  .middle{
    width: 60%;
  }
  .right{
    width: 14%;
  }

}
</style>